<template>
  <div class="comment-div">
    <div class="comment-little-div">
      <div class="comment-size-div">
        <div v-if="commentListSize===0">暂时没有评论哦快来占沙发吧~</div>
        <div v-else>
          {{ commentListSize }}条评论
        </div>
      </div>
      <el-divider />
      <div class="comment-input-div">
        <el-input placeholder="请输入内容" class="comment-input-content-div" v-model="commentContentData.commentContent" />
        <el-button
            v-if="commentType === 1"
            type="primary"
            plain
            class="comment-input-submit-div"
            @click="commitComment(0,articleItem.articleId,users.usersId,1)">发布评论</el-button>
        <el-button
            v-if="commentType === 2"
            type="primary"
            plain
            class="comment-input-submit-div"
            @click="commitComment(0,articleItem.videoId,users.usersId,1)">发布评论</el-button>
      </div>
      <div v-for="item in commentData">
        <div>
          <div class="comment-user-portrait-div">
            <el-avatar :size="35" :src="item.users.usersPortrait"/>
          </div>
          <div class="comment-user-total-div">
            <div>
              <div class="comment-users-total-name-div">
                {{ item.users.usersName }}
              </div>
              <div v-if="articleItem.users.usersId === item.users.usersId" class="comment-users-total-log-div">作者</div>
            </div>
            <div>
              {{ item.commentContent }}
            </div>
          </div>
        </div>
        <div class="comment-reply-size-time-div">
          <div class="comment-reply-size-time-dis-div">
            <el-button type="text" @click="reply(item)">回复</el-button>
          </div>
          <div class="comment-reply-size-time-dis-div">
            <TimeDisposal :date="item.commentCreatingTime" />
          </div>
        </div>
        <div v-if="item.multipleReply === null" />
        <div v-else v-for="reply in item.replyCommentList" class="comment-reply-comment-user-div">
          <div>
            <div class="comment-reply-comment-user-portrait-div">
              <el-avatar :size="20" :src="reply.users.usersPortrait" />
            </div>
            <div class="comment-reply-comment-user-name-div">
              {{ reply.users.usersName }}
            </div>
            <div v-if="articleItem.users.usersId === reply.users.usersId" class="comment-reply-comment-log-div">作者</div>:
            <div class="comment-reply-comment-content-div">
              {{ reply.commentContent }}
            </div>
          </div>
          <div class="comment-reply-time-div">
            <div class="comment-reply-time-little-div">
              <TimeDisposal :date="reply.commentCreatingTime"/>
            </div>
          </div>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="回复评论" :lock-scroll="false">
          <div>
            <div>
              <div class="comment-dialog-user-portrait-div">
                <el-avatar :size="33" :src="dialogContent.users.usersPortrait" />
              </div>
              <div class="comment-dialog-user-name-div">
                <div v-if="articleItem.users.usersId === dialogContent.users.usersId" class="comment-dialog-user-name-log-div">作者</div>
                <div>
                  {{ dialogContent.users.usersName }}
                </div>
              </div>
            </div>
            <div class="comment-dialog-time-div">
              <TimeDisposal :date="dialogContent.commentCreatingTime" />
            </div>
          </div>
          <div class="comment-dialog-replay-content-div">
            <div class="comment-dialog-replay-space-div" />
            <div class="comment-dialog-replay-content-little-div">
              {{ dialogContent.commentContent }}
            </div>
          </div>
          <el-divider />
          <div class="comment-dialog-replay-content-submit-div">
            <el-input placeholder="请输入想回复内容" class="comment-dialog-replay-content-submit-input-div" v-model="commentContentData.commentContent" />
            <el-button
                v-if="commentType === 1"
                type="primary"
                plain
                class="comment-dialog-replay-content-submit-little-div"
                @click="commitComment(dialogContent.commentId,articleItem.articleId,users.usersId,2)">发布评论</el-button>
            <el-button
                v-if="commentType === 2"
                type="primary"
                plain
                class="comment-dialog-replay-content-submit-little-div"
                @click="commitComment(dialogContent.commentId,articleItem.videoId,users.usersId,2)">发布评论</el-button>
          </div>
        </el-dialog>
        <el-divider />
      </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
import TimeDisposal from "./timeDisposal";
export default {
  components: { TimeDisposal },
  name: "comment",
  props:{
    commentProp:[],
    commentListSizeProp:0,
    users:{},
    articleItem:{},
    commentType:0
  },
  data(){
    return{
      commentData:[],
      commitState:true,
      dialogFormVisible: false,
      commentListSize:0,
      commentContentData:{
        commentUsers:0,
        commentArticle:0,
        commentContent:'',
        commentReplyUsers:0,
        commentReplyComment:0,
        commentType:0,
      },
      dialogContent:{
        commentArticle:0,
        commentContent:'',
        commentCreatingTime:'',
        commentId:0,
        commentUsers:0,
        users:{
          usersId:0,
          usersName:'',
          usersPortrait:''
        }
      },
    }
  },
  methods:{
    reply(item){
      this.dialogFormVisible=true;
      this.dialogContent=item;
    },
    commitComment(commentId,articleId,usersId,id){
      if (this.users !== ''){
        //判断是否为一级评论
        if (id === 1){
          this.commentContentData.commentUsers=usersId;
          this.commentContentData.commentArticle=articleId;
        }
        if(id === 2){
          this.commentContentData.commentArticle=articleId;
          this.commentContentData.commentReplyUsers=usersId;
          this.commentContentData.commentReplyComment=commentId;
        }
        this.commentContentData.commentType=this.commentType;
        if(this.commentContentData.commentContent === ''){
          this.$message({
            type:"warning",
            message:"评论内容没填写哦",
            offset:75
          })
          return
        }
        if (this.commitState === true){
          this.commitState=false;
          request.post('/comment/insertComment',this.commentContentData).then((res)=> {
            if(res.code !== "200"){
              this.$message({
                type:"error",
                message:res.msg,
                offset:75
              })
            }
            this.commentListSize=res.data.commentListSize;
            this.commentData=res.data.commentAndReplyContent;
            this.commitState=true;
            this.$message({
              type:"success",
              message:"评论成功",
              offset:75
            })
            this.commentContentData.commentUsers=0;
            this.commentContentData.commentContent='';
            this.commentContentData.commentArticle=0;
            this.commentContentData.commentReplyUsers=0;
            this.commentContentData.commentReplyComment=0;
          })
        }
        this.dialogFormVisible=false;
      }else {
        this.$message.warning("需要登录才能发布评论哦~")
      }
    },
  },
  watch:{
    commentProp(news){
        this.commentData=news;
    },
    commentListSizeProp(news){
      this.commentListSize=news;
    }
  },
}
</script>

<style lang="scss">
.comment-div{
  margin-top: 10px;
  border: 1px solid #d7dae2;
  border-radius: 10px;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 60px rgba(0, 0, 0, .04);

  .comment-little-div{
    margin: auto;
    max-width: 600px;
    margin-top: 30px;

    .comment-size-div{
      color: #0080FF;
      font-size: 15px;
    }

    .comment-input-div{
      margin-bottom: 10px;

      .comment-input-content-div{
        width: 68%;
        display: inline-block;
      }

      .comment-input-submit-div{
        width: 30%;float: right
      }
    }

    .comment-user-portrait-div{
      display: inline-block
    }

    .comment-user-total-div{
      display: inline-block;
      margin-left: 5px;

      .comment-users-total-name-div{
        display: inline-block;
        font-size: 12px;
      }

      .comment-users-total-log-div{
        font-size: 12px;
        display: inline-block;
        color: #0080FF;
      }
    }

    .comment-reply-size-time-div{
      margin-left: 45px;
      font-size: 10px;

      .comment-reply-size-time-dis-div{
        display: inline-block;
      }
    }

    .comment-reply-comment-user-div{
      margin-left: 47px;

      .comment-reply-comment-user-portrait-div{
        display: inline-block;
      }

      .comment-reply-comment-user-name-div{
        display: inline-block;
        font-size: 12px;
      }

      .comment-reply-comment-log-div{
        display: inline-block;
        color: #0080FF;
        font-size: 12px;
      }

      .comment-reply-comment-content-div{
        display: inline-block;
        font-size: 14px;
      }
    }

    .comment-dialog-user-portrait-div{
      display: inline-block;
    }

    .comment-dialog-user-name-div{
      display: inline-block;

      .comment-dialog-user-name-log-div{
        color: #0080FF
    }
    }

    .comment-dialog-time-div{
      float: right;
      display: inline-block;
    }

    .comment-dialog-replay-content-div{
      margin-top: 10px;

      .comment-dialog-replay-space-div{
        width: 30px;
        display: inline-block;
      }

      .comment-dialog-replay-content-little-div{
        display: inline-block;
        color: #4c2929;
      }
    }

    .comment-dialog-replay-content-submit-div{
      margin-bottom: 10px;
      margin-top: 20px;

      .comment-dialog-replay-content-submit-input-div{
        width: 68%;
        display: inline-block;
      }

      .comment-dialog-replay-content-submit-little-div{
        width: 30%;
        float: right;
      }
    }

    .comment-reply-time-div{
      margin-left: 25px;
      margin-top:10px;
      font-size: 10px;

      .comment-reply-time-little-div{
        display: inline-block
      }
    }
  }
}
</style>